<template>
  <el-pagination
    :page-size="pageSize"
    :page-sizes="small?[]:[10, 20, 50, 100]"
    :current-page="currentPage"
    :total="total"
    :prev-text="prevText"
    :next-text="nextText"
    :small="small"
    :pager-count="pagerCount"
    :background="small?false:background"
    :layout="small?'prev, pager, next':layout"
    @current-change="pageChange"
    @size-change="handleSizeChange"
  />
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'MPagination'
})
export default class extends Vue {
  @Prop({ default: false }) private small?: boolean; // 小型分页
  @Prop({ default: true }) private background?: boolean; // 带有背景色的分页
  @Prop({ default: 10 }) private pageSize!: number; // 每页多少条
  @Prop({ default: 1 }) private currentPage!: number; // 当前页码
  @Prop({ default: 0 }) private total!: number; // 总条数
  @Prop({ default: 7 }) private pagerCount!: number; //

  @Prop({ default: '' }) private prevText?: string; //
  @Prop({ default: '' }) private nextText?: string; //
  @Prop({ default: 'total, prev, pager, next, sizes,jumper' })
  private layout?: string; //

  mounted() {}
  // page改变
  private pageChange(v: number) {
    this.$emit('current-change', v)
  }
  // size改变
  private handleSizeChange(v: number) {
    this.$emit('size-change', v)
  }
}
</script>
